<!--
 * @Description: 二维码
 * 
 * @Author: XiongYaoYuan<xiongyaoyuan>
 * @Date: 2023-07-23 09:55:36
 * @FilePath: /yuxiuproweb/src/views/system/user/mods/QCode.vue
-->
<template>
  <el-dialog
    :close-on-click-modal="false"
    title="二维码"
    :visible.sync="shows"
    width="400px"
    append-to-body
  >
    <div id="print">
      <div class="qr-text">
        {{ data.nickName }}
      </div>
      <!-- <div class="qr-text">{{ selectName }}</div> -->
      <div id="qrcode" ref="qrcode" style="margin-bottom: 50px"></div>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="success" @click="submitDownload">下 载</el-button> -->
      <el-button type="primary" @click="submitPrint">打 印</el-button>
      <el-button @click="shows = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { selectListByUserId } from "@/api/system/user";
import Qrcode from "qrcodejs2";
import printJS from "print-js";

export default {
  props: {
    show: Boolean,
    data: {
      type: Object,
    },
  },
  data() {
    return {
      selectName: "",
    };
  },
  computed: {
    shows: {
      get() {
        return this.show;
      },
      set(newValue) {
        this.$emit("update:show", newValue);
      },
    },
  },
  created() {
    this.$nextTick(() => {
      new Qrcode(this.$refs.qrcode, {
        text: `${this.data.userName}-123456`,
        width: 100,
        height: 100,
        colorDark: "#333",
        colorLight: "#fff",
        correctLevel: Qrcode.CorrectLevel.L,
      });
    });
    this.getSelectListByUserId();
  },
  mounted() {},
  methods: {
    getSelectListByUserId() {
      selectListByUserId({
        userId: this.data.userId,
      }).then(({ data }) => {
        this.selectName = data?.map((e) => e.processName).join();
      });
    },
    submitPrint() {
      const style =
        "@page { margin: 10px } @media print { #print { width: 260px; } .qr-text { width: 100%; text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 10px; } #qrcode { width: 200px; height: 200px; position: relative; top: 30px; left: 80px;} .text { font-size: 15px; }}";
      printJS({
        printable: "print",
        type: "html",
        style: style,
        base64: true,
        scanStyles: false,
        onPrintDialogClose: () => {
          //   this.shows = false;
        },
      });
    },
    submitDownload() {},
  },
};
</script>

<style scoped lang="scss">
#print {
  width: 360px;
}
.qr-text {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}
#qrcode {
  width: 100px;
  height: 100px;
  position: relative;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
}
</style>
